<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">收到的评价</block>
		</cu-custom>
		<view class="padding">
			<view class="cu-list menu-avatar comment">
				<template v-if="list.length > 0">
					<view class="cu-item margin-bottom radius-xl" v-for="(item, index) in list" :key="index">
						<view class="cu-avatar round" :style="{ backgroundImage: 'url(' + item.headimg + ')' }"></view>
						<view class="content">
							<view class="nickNameandTime">
								<view class="nickBox crow">
									<view class="text-black nickName">{{ item.nickname }}</view>
									<view class="text-gray text-sm">{{ item.create_time }}</view>
								</view>
							</view>
							<view class="text-sm score">
								<text class="cuIcon-favorfill text-orange padding-left-mn" v-for="(it, indexs) in item.grade"
									:key="indexs"></text>
							</view>
							<view class="text-gray text-content text-df">
								{{ item.content }}
							</view>
							<view class="tag flex flex-wrap padding-top-xs">
								<view v-for="(item, index) in item.tags" :key="index" class="padding-right-xs">
									<view class='cu-tag radius'>{{ item }}</view>
								</view>
							</view>
							<view class="crow margin-top-sm text-sm" v-if="item.reply">
								<text>你的回复：</text>
								<text class="text-gray">{{ item.reply }}</text>
							</view>
							<view class="margin-top-sm text-sm" v-else>
								<textarea placeholder="回复：" class="text-sm bg-f5f5f7 padding radius-lg w-100" v-model="item.reply_content"></textarea>
								<view class="text-right padding-top">
									<button class="cu-btn china-btn-bg text-sm"  @click="submit(item)">回复</button>
								</view>
							</view>
						</view>
					</view>
				</template>
				<view class="vh-100 flex flex-direction justify-center" v-else>
					<emptyData type="notLog" text="暂无评论"></emptyData>
				</view>
			</view>
		</view>

		<loading v-if="pageLoading" />

	</view>
</template>

<script>
export default {
	data() {
		return {
			pageLoading: false,
			search: {
				page: 1,
				action:'technician'
			},
			list: []
		};
	},
	onLoad() {
		this.pageLoading = true;
		this.getList();
	},
	onReachBottom() {
		this.search.page++;
		this.getList();
	},
	methods: {
		getList() {
			this.$utils.$api.Comment.index(this.search).then(data => {
				this.list = [...this.list, ...data.data];
			}).catch(() => { }).finally(() => {
				this.pageLoading = false;
			})
		},
		submit(item){
			if(!item.reply_content){return;}
			this.pageLoading = true;
			this.$utils.$api.Comment.reply({
				id:item.id,
				reply_content:item.reply_content
			}).then(res => {
				item.reply = item.reply_content;
				this.$utils.$message.success(res.msg);
			}).catch((err) => {
				this.$utils.$message.error(err.msg);
			}).finally(() => {
				this.pageLoading = false;
			})
		}
	}
}
</script>

<style lang="less" scoped>
.comment {
	.content {
		.nickBox {
			width: 100%;
			justify-content: space-between;
		}

		.score {
			margin-top: -13upx;
		}
	}
}
.w-100{
	width: 100%;
}
</style>
